<template>
	<div>
		<div class="template" v-show="loading">
			<div><mt-spinner :type="3" :size="60"></mt-spinner></div>
		</div>
		<header class="navigation">
			<div @click="retreat"><img src="../assets/rightbut.png"></div>
			<div>提现</div>
			<div @click="detail">提现明细</div>
		</header>
		
		<div class="extractWay">
			<div @click="cal">
				<img src='../assets/withdrawDeposit/unselected.png' class="select" v-show='!calshow'>
				<img src='../assets/withdrawDeposit/opt.png' class="select" v-show='calshow'>
				<img src="../assets/withdrawDeposit/cal.png" class="wayimg">
			</div>
			<div @click="cal">
				<img src='../assets/withdrawDeposit/unselected.png' class="select" v-show='calshow'>
				<img src='../assets/withdrawDeposit/opt.png' class="select" v-show='!calshow'>
				<img src="../assets/withdrawDeposit/Alipay.png" class="wayimg">
			</div>
		</div>
		<div v-show="calshow">
			<div class="bankcard">
				
				<div class="bankcard_d">
					<div>持卡人</div>
					<div><input type="text" placeholder="请输入持卡人名称" ref='cardName'/></div>
				</div>
				
				<div class="bankcard_d">
					<div>联系方式</div>
					<div><input type="text" :value="tel" disabled="disabled" ref='phone'/></div>
				</div>
				
				<div class="bankcard_d">
					<div>卡号</div>
					<div><input type="text" placeholder="输入你的卡号" ref='cardNo'/></div>
				</div>
				
				<div class="bankcard_d" @click="calon">
					<div>到账银行</div>
					<div>
						<input type="text" placeholder="请点击选择银行卡" disabled="disabled" v-show='bankshow'/>
						<input type="text" :value="calname" disabled="disabled" v-show='!bankshow' ref='bandCode'/>
					</div>
				</div>
		
			</div>
			
			<div class="money">
				<div class="money_d">
					<div>提现金额</div>
					<div @click="all">全部提现</div>
				</div>
				<div class="money_dd">
					<div>￥</div>
					<div><input type="number" ref='amount' placeholder="0.0" :value="allmoney" @input="amount"/></div>
				</div>
			</div>
			
			<div class="balance">本次账户内最多可提现金额{{money}}元</div>
			
			
			<div class="affirm" @click="calaffirm">确认提现</div>
		</div>
		
		<div class="mask" v-show='listshow'>
			<div class="maskarea"></div>
			<mt-picker class="areainfo" :slots="List" @change="onList"></mt-picker>
			<div class="maskbutcon">
				<div class="cancelbut" @click="listcancelbut">取消</div>
				<div class="masksurebut" @click="listsurebut">确定</div>
			</div>
		</div>
		
		<div v-show="!calshow">
			
			<div class="Alipay">
				
				<div class="Alipay_d">
					<div>姓名</div>
					<div><input type="text" placeholder="请输入真实姓名" ref='aliName'/></div>
				</div>
				
				<div class="Alipay_d">
					<div>支付宝账号</div>
					<div><input type="text" placeholder="请输入你的支付宝账号" ref='aliAccount'/></div>
				</div>
				
				<div class="Alipay_d">
					<div>手机号</div>
					<div><input type="text" :value="tel" disabled="disabled" ref='tel'/></div>
				</div>
				
				<div class="Alipay_d">
					<div>验证码</div>
					<div class="verify">
						<input type="text" placeholder="请输验证码" ref='code'/>
						<div v-show="show" @click="verify">获取验证码</div>
						<div v-show="!show">{{count}}S</div>
					</div>
				</div>
				
				<div class="Alipay_d">
					<div>提现金额</div>
					<div><input type="text" placeholder="请输入提现金额" ref='zfbamount' @input='zfbamount'/></div>
				</div>
				
			</div>
			
			<div class="balances">可用余额：{{money}}元</div>
			
			<div class="affirm" @click="zfbaffirm">提现申请</div>
			
			<div class="details">
				<div>*最低提现金额为10元，单笔提现手续1元</div>
				<div>新用户首次提现免费</div>
			</div>
			
		</div>
		
		
	</div>
</template>

<script>
	import { BaseUrl } from '../Baseurl/common.js';
	import { Picker } from 'mint-ui';
	import { Toast } from 'mint-ui';
	export default{
		data(){
			return{
				loading:true,
				token:'',
				code:'',
				calName:'',
				bankshow:true,
				listshow:false,
				show:true,
				calshow:true,
				tel:'',
				count:'',
				money:'',
				allmoney:'',
				amountshow:true,
				List:[
					{
						flex:1,
			          	values: [],
			          	className: 'slot1',
			          	textAlign: 'center'
					}
				],
			}
			},
			components: {
				'mt-picker': Picker,
			},
			created(){
				this.token = localStorage.getItem('token');
				this.money = this.$route.query.money;
				
					
				//获取银行卡
				var url = BaseUrl + 'withDrawals/bank/list';
				this.$http.get(url).then(res=>{
					if(res.data.code == '10000'){
						this.loading = false;
						this.list = res.data.data; // 获取的数据
						this.listname = []
						this.listcode = []
						for(var a=0;a<this.list.length;a++){
							this.listname.push(this.list[a].name);
							this.listcode.push(this.list[a].code);
						}
						this.List[0].values = this.listname; //赋值到picked
					}
				}).catch(res=>{
					Toast({
						message: "网络异常",
						position: 'middle',
						duration: 3000
					})
				})
				//获取手机号
				var url = BaseUrl + 'users/info?appId=wap&' + 'token=' + this.token;
				this.$http.get(url).then(res=>{
					if(res.data.code == '10000'){
						this.loading = false;
						this.tel = res.data.data.phone;
					}
				}).catch(res=>{
					Toast({
						message: "网络异常",
						position: 'middle',
						duration: 3000
					})
				})
				//获取余额
				var url = BaseUrl + 'users/index?token=' + this.token + '&appId=wap';
				this.$http.get(url).then(res=>{
//					console.log(res)
					if(res.data.code == '10000'){
						this.loading = false;
						this.money = res.data.userinfo.money;
					}
				}).catch(res=>{
					Toast({
						message: "网络异常",
						position: 'middle',
						duration: 3000
					})
				})
			},
			methods: {
				//全部提现
				all:function(){
					this.allmoney = this.money;
				},
				//银行卡提现输入金额
				amount:function(){
					var reg = /^\d{0,8}\.{0,1}(\d{1,2})?$/;
					if(this.$refs.amount.value > this.money){
						Toast({
							message: '提现金额不能大于余额',
							position: 'middle',
							duration: 3000
						})
						this.amountshow = false;
					}else if(!reg.test(this.$refs.amount.value)){
						Toast({
							message: '输入的金额只能是两位小数',
							position: 'middle',
							duration: 3000
						})
						this.amountshow = false;
					}else{
						this.amountshow = true;
					}
				},
				//支付宝提现金额
				zfbamount:function(){
					var reg = /^\d{0,8}\.{0,1}(\d{1,2})?$/;
					if(this.$refs.zfbamount.value > this.money){
						Toast({
							message: '提现金额不能大于余额',
							position: 'middle',
							duration: 3000
						})
						this.amountshow = false;
					}else if(!reg.test(this.$refs.zfbamount.value)){
						Toast({
							message: '输入的金额只能是两位小数',
							position: 'middle',
							duration: 3000
						})
						this.amountshow = false;
					}else{
						this.amountshow = true;
					}
				},
				//导航退后
				retreat:function(){
					window.history.go(-1);
				},
				//提现明细
				detail:function(){
					this.$router.push({
						path:'/withdrawDepositdetail'
					})
				},
				//倒计时
				verify:function(){
					//获取验证码
					var url = BaseUrl + 'login/code?phone=' + this.tel;
					this.$http.get(url).then(res=>{
//						console.log(res)
					})
					var dsq = 60;
					this.show = false;
					if(!this.timer) {
						this.count = dsq;
						this.timer = setInterval(() => {
							if(this.count > 0 && this.count <= dsq) {
								this.count--;
							} else {
								this.show = true;
								clearInterval(this.timer);
								this.timer = null;
							}
						}, 1000)
					}
				},
				//卡
				cal:function(){
					this.calshow = !this.calshow;
				},
				//银行卡提现
				calaffirm:function(){
					var cardName = this.$refs.cardName.value;
					var cardNo = this.$refs.cardNo.value;
					var phone = this.$refs.phone.value;
					var amount = this.$refs.amount.value;
					var url = BaseUrl + 'withDrawals/wx/apply?appId=wap&token=' + this.token + '&cardName=' + cardName +'&cardNo=' +cardNo +'&bandCode=' +this.code + '&phone=' + phone + '&amount=' + amount;
					if(amount >= 10 && this.amountshow == true){
						
						if(cardName !='' && cardNo !='' && this.code !='' && phone !='' && amount!=''){
							this.$http.get(url).then(res=>{
							if(res.data.code == '10000'){
								//成功显示
								var url = BaseUrl + 'withDrawals/wx/fee?appId=wap&token=' + this.token + '&amount=' + amount;
								this.$http.get(url).then(res=>{
									if(res.data.code == '10000'){
										Toast({
											message: '手续费为' + res.data.data.fee + '元',
											position: 'middle',
											duration: 3000
										})
										//获取余额
										var url = BaseUrl + 'users/index?token=' + this.token + '&appId=wap';
										this.$http.get(url).then(res=>{
											if(res.data.code == '10000'){
												this.money = res.data.userinfo.money;
											}
										}).catch(res=>{
											Toast({
												message: "网络异常",
												position: 'middle',
												duration: 3000
											})
										})
									}
								}).catch(res=>{
									Toast({
										message: "网络异常",
										position: 'middle',
										duration: 3000
									})
								})
									
								}else{
									Toast({
										message: res.data.msg,
										position: 'middle',
										duration: 3000
									})
								}
							}).catch(res=>{
								Toast({
									message: "网络异常",
									position: 'middle',
									duration: 3000
								})
							})
						}else{
							Toast({
								message: '请完善信息',
								position: 'middle',
								duration: 3000
							})
						}
						
						
						
					}else{
						Toast({
							message: '提现金额最少为10元、提现金额不能大于余额、提现金额小数位两位',
							position: 'middle',
							duration: 3000
						})
					}
					
				},
				//点击选择银行
				calon:function(){
					this.listshow = true
				},
				//取消选择银行
				listcancelbut:function(){
					this.listshow = false;
					this.bankshow = true;
					this.code = '';
				},
				//确定选择银行
				listsurebut:function(){
					this.listshow = false;
					this.bankshow = !this.bankshow;
				},
				onList(picker, values) {
					this.calname = values[0];
					this.code = this.listcode[this.listname.lastIndexOf(values[0])]	
				},
				
				//支付宝提现
				zfbaffirm:function(){
					var aliName = this.$refs.aliName.value;
					var aliAccount = this.$refs.aliAccount.value;
					var code = this.$refs.code.value;
					var zfbamount = this.$refs.zfbamount.value;
					var tel = this.$refs.tel.value;
					var url = BaseUrl + 'withDrawals/ali/apply?appId=wap&' + 'token=' + this.token + '&aliName=' +aliName +"&aliAccount=" + aliAccount +'&phone='+ tel +"&code=" +code +"&amount=" + zfbamount;
					if(zfbamount >= 10 && this.amountshow == true){
						
						if(aliName !='' && aliAccount !='' && code !='' && zfbamount !='' && tel!=''){
							this.$http.get(url).then(res=>{
								if(res.data.code == '10000'){
									//成功显示
									var url = BaseUrl + 'withDrawals/ali/fee?appId=wap&token=' + this.token ;
									this.$http.get(url).then(res=>{
//										console.log(res.data);
										if(res.data.code == '10000'){
											Toast({
												message: '手续费为' + res.data.data + '元',
												position: 'middle',
												duration: 3000
											})
												//获取余额
											var url = BaseUrl + 'users/index?token=' + this.token + '&appId=wap';
											this.$http.get(url).then(res=>{
												console.log(res)
												if(res.data.code == '10000'){
													this.loading = false;
													this.money = res.data.userinfo.money;
												}
											}).catch(res=>{
												Toast({
													message: "网络异常",
													position: 'middle',
													duration: 3000
												})
											})
										}
									}).catch(res=>{
										Toast({
											message: "网络异常",
											position: 'middle',
											duration: 3000
										})
									})
									
								}else{
									Toast({
										message: res.data.msg,
										position: 'middle',
										duration: 3000
									})
								}
							}).catch(res=>{
									Toast({
										message: "网络异常",
										position: 'middle',
										duration: 3000
									})
								})
						}else{
							Toast({
								message: '请完善信息',
								position: 'middle',
								duration: 3000
							})
						}
						
						
						
					}else{
						Toast({
							message: '提现金额最少为10元、提现金额不能大于余额、提现金额小数位两位',
							position: 'middle',
							duration: 3000
						})
					}

				}
				
				
			}
}
</script>

<style scoped="scoped">
	.template{
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.5);
		position: absolute;
		z-index: 99;
	}
	.template div{
		position: absolute;
		top: 5.5rem;
		left: 50%;
		margin-left: -0.6rem;
	}
	.navigation{
		height: 1rem;
		background: #fff;
		display: flex;
		border-bottom: 1px solid #dcd2d1;
		justify-content: space-between;
		align-items: center;
		padding: 0 0.24rem;
	}
	
	.navigation img{
		width: 0.2rem;
		height: 0.36rem;
		display: block;
	}
	.navigation div:first-child{
		color: #323232;
		font-size: 0.33rem;
	}
	.navigation div:last-child{
		color: #656565;
		font-size: 0.25rem;
	}
	
	.extractWay{
		border-top: 0.1rem solid #f2f2f2;
		border-bottom: 0.1rem solid #f2f2f2;
		background: #fff;
		display: flex;
		flex-direction:row;
	}
	.extractWay div{
		width: 50%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0.2rem;
	}
	.select{
		width: 0.36rem;
		height: 0.36rem;
	}
	.wayimg{
		width: 1rem;
		height: 1rem;
		margin-left: 0.2rem;
		border-radius: 50%;
	}
	.bankcard{
		width: 100%;
		border-bottom: 0.15rem solid #f2f2f2;
	}
	.bankcard_d{
		display: flex;
		justify-content: space-between;
		padding: 0.2rem 0.25rem;
		border-bottom: 1px solid #323232;
	}
	.bankcard_d input{
		border: none;
		outline: none;
		text-align: right;
	}
	
	.money{
		background: #FFF;
		padding: 0.2rem 0.25rem;
		border-bottom: 1px solid #323232;
	}
	.money_d{
		display: flex;
		justify-content: space-between;
	}
	.money_d div:first-child{
		color: #323232;
		font-size: 0.26rem;
	}
	.money_d div:last-child{
		color: #ff2040;
		font-size: 0.26rem;
	}
	.money_dd{
		display: flex;
		font-size: 0.5rem;
	}
	.money_dd div:first-child{
		color: #656565;
	}
	.money_dd div:last-child input{
		color: #323232;
		border: none;
		outline: none;
	}
	
	.balance{
		text-align: right;
		color: #656565;
		font-size: 0.26rem;
		padding: 0.2rem 0.25rem;
	}
	
	.affirm{
		padding: 0.2rem 0;
		border-radius: 0.52rem;
		background: #ff2040;
		text-align: center;
		margin: 0.4rem 0.25rem 0 0.25rem;
		color: #fff;
		font-size: 0.25rem;
	}
	
	
	.Alipay_d{
		padding: 0.5rem 0.25rem 0.2rem 0.25rem;
		display: flex;
		border-bottom: 1px solid #323232;
	}
	input{
		border: none;
		outline: none;
		background: #fff;
	}
	.Alipay_d div:first-child{
		width: 2rem;
	}
	.verify{
		display: flex;
		justify-content: space-between;
	}
	.verify div{
		width: 1.8rem;
		padding: 0.1rem 0.05rem;
		border: 1px solid #323232;
		border-radius: 0.3rem;
		text-align: center;
	}
	
	.balances{
		padding: 0.2rem 0.25rem;
	}
	.details{
		margin-top: 0.2rem;
	}
	.details div{
		text-align: center;
		color: #656565;
	}
</style>